import { View, StyleSheet, TouchableOpacity, Text } from "react-native";
import { RTCView, MediaStream } from 'react-native-webrtc';
import { useEffect, useState } from 'react';
import Adapt from '../../../ulits/Adapt';

interface LivePageProps {
    onClose: () => void;
    toggleCamera: () => void;
    isFrontCamera: boolean;
    startLive: () => void;
    device: any;
    onError: (error: string) => void;
    localStream: MediaStream | null;
}

export default function LivePage({ onClose, toggleCamera, isFrontCamera, startLive, device, onError, localStream }: LivePageProps) {
    return (
        <View style={styles.container}>
            {/* 顶部标题 */}
            <View style={styles.header}>
                <Text onPress={onClose}>❌</Text>
            </View>
            
            {/* 摄像头预览 */}
            {localStream && (
                <RTCView
                    streamURL={localStream.toURL()}
                    style={StyleSheet.absoluteFill}
                    objectFit="cover"
                />
            )}
            
            {/* 底部操作区 */}
            <View style={styles.controlsContainer}>
                <TouchableOpacity 
                    style={styles.switchButton}
                    onPress={toggleCamera}
                >
                    <Text style={styles.switchButtonText}>
                        {isFrontCamera ? '切换到后置' : '切换到前置'}
                    </Text>
                </TouchableOpacity>
                <TouchableOpacity 
                    style={styles.liveButton}
                    onPress={startLive}
                >
                    <Text style={styles.liveButtonText}>开始直播</Text>
                </TouchableOpacity>
            </View>
        </View>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: 'black',
    },
    header: {
        position: 'absolute',
        top: Adapt.adapt(50),
        left: Adapt.adaptMargin(350),
        right: 0,
        zIndex: 2,
    },
    headerText: {
        color: 'white',
        fontSize: Adapt.adaptFontSize(22),
        fontWeight: 'bold',
    },
    controlsContainer: {
        position: 'absolute',
        bottom: Adapt.adapt(40),
        left: 0,
        right: 0,
        alignItems: 'center',
        zIndex: 2,
    },
    switchButton: {
        backgroundColor: 'rgba(0, 0, 0, 0.6)',
        paddingHorizontal: Adapt.adapt(20),
        paddingVertical: Adapt.adapt(10),
        borderRadius: Adapt.adaptRadius(20),
        marginBottom: Adapt.adapt(16),
    },
    switchButtonText: {
        color: 'white',
        fontSize: Adapt.adaptFontSize(16),
    },
    liveButton: {
        backgroundColor: '#FF3366',
        paddingHorizontal: Adapt.adapt(40),
        paddingVertical: Adapt.adapt(14),
        borderRadius: Adapt.adaptRadius(25),
    },
    liveButtonText: {
        color: 'white',
        fontSize: Adapt.adaptFontSize(18),
        fontWeight: 'bold',
    },
    errorText: {
        color: 'white',
        fontSize: Adapt.adaptFontSize(16),
        textAlign: 'center',
        marginTop: Adapt.adapt(20),
    },
});